<script>
  // 用户头像组件，全局注册vue-lazy-load后才可以使用图片懒加载功能
  export default {
    name: 'user-portrait',

    props: {
      // 是否关闭图片懒加载
      immediate: {
        type: Boolean
      },
      size: {
        type: String,
        default: '40px'
      },
      URL: {
        type: String,
        default: require('./default-portrait.png')
      }
    },

    render() {
      const lazyDirective = Vue.directive('lazy');
      const directives = !this.immediate && !!lazyDirective ?
        [{
          name: 'lazy',
          arg: 'background-image',
          value: {
            src: this.URL,
            error: require('./default-portrait.png'),
            loading: require('./default-portrait.png')
          },
        }]
        : null;

      return (
        /**
         * @18/06/22 关于Vue中jsx的指令写法:
         * https://github.com/vuejs/babel-plugin-transform-vue-jsx
         */
        <span
          class="user-portrait"
          {...{directives}}
          style={{
            width: this.size,
            height: this.size,
            backgroundImage: this.immediate && `url(${this.URL})`
          }}
        />
      )
    }
  }
</script>

<style lang="less" scoped>
  .user-portrait {
    position: absolute;

    display: inline-block;
    border-radius: 50%;

    background: #fff center / cover no-repeat;
  }
</style>
